<template>
  <div>
    <div style="margin-bottom: 20px;">
      <el-card shadow="hover" body-style="width:100%;">
        <div style="display: flex">
          <div style="display: flex;align-items:center;margin-right:20px">
            <i class="el-icon-user" />
          </div>
          <div style="display: flex;align-items:center;margin-right:10px">用户名：</div>
          <el-input v-model="username" style="width: 200px" placeholder="请输入用户名" clearable />
          <div style="display: flex;align-items:center;margin-left:20px;">
            <i class="el-icon-phone" />
          </div>
          <div style="display: flex;align-items:center;margin-left:20px;margin-right:10px">手机号：</div>
          <el-input v-model="phone" style="width: 200px" placeholder="请输入电话" clearable />
          <div style="display: flex;align-items:center;margin-left:20px;">
            <i class="el-icon-location-outline" />
          </div>
          <div style="display: flex;align-items:center;margin-left:30px;margin-right:10px">送餐地址：</div>
          <el-input v-model="address" style="width: 200px" placeholder="请输入地址" clearable />
          <div style="padding: 0px 20px;margin-left: 50px">
            <el-button type="primary" @click="getList">查找订单</el-button>
          </div>
          <div>
            <el-button type="primary" plain @click="clearInput">清空</el-button>
          </div>
        </div>
      </el-card>
    </div>
    <el-card shadow="hover" body-style="width:100%;">
    <el-table :data="orderList" style="width: 100%" border stripe :header-cell-class-name="'headerBg'">
      <el-table-column prop="id" label="订单编号" width="80px" fixed align="center">
        <template scope="scope">
          <span>{{ (pageParams.page - 1) * pageParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="openId" label="用户编号" width="width" />-->
      <el-table-column prop="name" label="用户名字" width="130px" align="center" />
      <el-table-column prop="phone" label="电话" width="130px" align="center" />
      <el-table-column prop="address" label="地址" width="300px" align="center" />
      <el-table-column
        prop="status"
        label="订单状态"
        width="110"
        :filters="[{ text: '备餐中', value: '0' }, { text: '配送中', value: '1' },{ text: '已完成', value: '2' }, { text: '已取消订单', value: '3' }]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            :type="getStatusType(scope.row.status)"
            disable-transitions
          >
            {{ statusText[scope.row.status] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="created" label="下单时间" width="180px">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ scope.row.created }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="updated" label="更新时间" width="180px">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ scope.row.updated }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="300px" column-align="center" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            plain
            @click="showFood(scope.row.id)"
          >订单详情</el-button>
          <template v-if="scope.row.status === 0">
            <el-button
              type="primary"
              size="mini"
              @click="updateStatus(scope.row.id, 1)"
            >开始配送</el-button>
            <el-button
              type="danger"
              size="mini"
              plain
              @click="updateStatus(scope.row.id, 3)"
            >取消订单</el-button>
          </template>

          <template v-if="scope.row.status === 1">
            <el-button
              type="success"
              size="mini"
              @click="updateStatus(scope.row.id, 2)"
            >配送完成</el-button>
            <el-button
              type="danger"
              size="mini"
              plain
              @click="updateStatus(scope.row.id, 3)"
            >取消订单</el-button>
          </template>
          <template v-if="scope.row.status === 2 || scope.row.status === 3">
            <el-button
              type="danger"
              size="mini"
              @click="deleteOrder(scope.row.id)"
            >删除订单</el-button>
          </template>
          <!-- <template v-if="scope.row.status === 3">
            <el-button type="danger" size="mini">删除订单</el-button>
          </template> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="width">
      <div>
        <el-table :data="orderFood" style="width: 100%" border stripe :header-cell-class-name="'headerBg'">
          <el-table-column type="index" label="序号" width="50px" />
          <el-table-column prop="imgSrc" label="菜品" width="width">
            <template slot-scope="scope">
              <img height="100px" width="100px" :src="scope.row.imgSrc">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名字" width="width" />
          <el-table-column prop="count" label="数量" width="width" />
          <el-table-column prop="price" label="价格" width="width">
            <template slot-scope="scope">
              ¥ {{ scope.row.price | rounding }}
            </template>
          </el-table-column>
        </el-table>

        <div class="totalCount"><span>总计 ：</span><span>{{ totalCount }}元</span></div>
      </div>
      <div slot="footer">
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-empty v-if="orderList.length === 0 " :image-size="500" />
    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 20px; textalign: center"
      :current-page="pageParams.page"
      :page-sizes="[3, 5, 10]"
      :page-size="pageParams.pageSize"
      :pager-count="4"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="pageParams.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </el-card>
  </div>
</template>

<script>
// import { ElEmpty } from 'element-plus'
export default {
  name: 'OrderList',
  // components: {
  //   'el-empty': ElEmpty
  // },
  filters: {
    rounding(value) {
      return value.toFixed(2)
    }
  },
  data() {
    return {
      username: '',
      phone: '',
      address: '',
      dialogVisible: false,
      orderList: [],
      orderParams: {
        id: '',
        status: ''
      },
      // 分页参数
      pageParams: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      filteredValue: [],
      orderFood: [],
      statusText: {
        '0': '备餐中',
        '1': '配送中',
        '2': '已完成',
        '3': '已取消订单'
      }
    }
  },
  computed: {
    totalCount() {
      return this.orderFood.reduce((prev, curr) => { return prev + curr.price * curr.count }, 0)
    },
    getStatusType() {
      const typeMap = {
        '0': 'primary',
        '1': 'warning',
        '2': 'success',
        '3': 'danger'
      }
      return (status) => typeMap[status]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    clearInput() {
      this.username = ''
      this.phone = ''
      this.address = ''
      this.getList()
    },
    // 分页函数
    handleSizeChange(newPageSize) {
      this.pageParams.pageSize = newPageSize
      this.getList()
    },
    handleCurrentChange(current) {
      this.pageParams.page = current
      this.getList()
    },
    filterTag(value, row) {
      console.log('我得值：', row)
      console.log('我得值=：', Number(value))
      return row.status === Number(value)
    },
    async getList() {
      console.log(this.username)
      console.log(this.address)
      console.log(this.phone)
      const res = await this.$API.order.reqOrderList(this.pageParams, this.username, this.phone, this.address)
      if (res.code === 200) {
        this.pageParams.total = res.data.total
        this.orderList = res.data.orderVoList
      }
    },

    // async showFood(id) {
    //   this.dialogVisible = true
    //   const res = await this.$API.order.reqOrderFood(id)
    //   if (res.code === 200) {
    //     this.orderFood = res.data
    //   }
    // },
    async showFood(id) {
      if (this.loading) return // 如果正在加载，则直接返回
      this.dialogVisible = true
      this.loading = true // 设置正在加载标志
      try {
        const res = await this.$API.order.reqOrderFood(id)
        if (res.code === 200) {
          this.orderFood = res.data
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false // 取消正在加载标志
      }
    },
    updateStatus(id, status) {
      var msg
      var cancleMsg
      if (status === 1) {
        msg = '确定要开始配送订单吗?'
        cancleMsg = '取消修改配送状态'
      } else if (status === 2) {
        msg = '确认是否配送完成?'
        cancleMsg = '取消修改配送状态'
      } else {
        msg = '确定要取消订单吗?'
        cancleMsg = '你没有取消订单'
      }
      this.$confirm(msg, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          this.orderParams.id = id
          this.orderParams.status = status
          const res = await this.$API.order.reqUpdateStatus(this.orderParams)
          if (res.code === 200) {
            this.$message.success('更新订单状态成功')
            this.getList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: cancleMsg
          })
        })
    },

    deleteOrder(id) {
      this.$confirm('是否删除该菜品？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await this.$API.order.reqDeleteOrder(id)
          if (res.code === 200) {
            this.$message.success('删除订单成功')
            this.getList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: '你取消了删除'
          })
        })
    }

  }
}
</script>

<style scoped>
.totalCount {
  display: flex;
  float: right;
  margin-top: 10px;
  margin-right: 60px;
  font-size: 18px;
  font-weight: bold;
}
.headerBg {
  background: #eee!important;
}
</style>
